<template>
  <div class="main-container">
    <svg class="iconmqj" aria-hidden="true">
      <use xlink:href="#iconkw-mylogo"></use>
    </svg>
    <!-- <a id="audio_btn"><img src="../../assets/img/img-find/img-mother/laba.png" id="music_btn" border="0" title="click to control the music"></a> -->
    <swiper :options="swiperOption" ref="mqjSwiper" id="mqj-swiper"> 
      <swiper-slide>
        <div class="slide-container">
          <div class="slide-main">
            <div class="mqj-light">
                <img src="../../assets/img/img-find/img-mother/mqj-img21.png" alt="">
            </div>
            <div class="mqj-wanju">
                <img src="../../assets/img/img-find/img-mother/mqj-img20.png" alt="">
            </div>
            <div class="mqj-xuegao1">
                <img src="../../assets/img/img-find/img-mother/mqj-img05.png" alt="">
            </div>
            <div class="mqj-xuegao2">
                <img src="../../assets/img/img-find/img-mother/mqj-img06.png" alt="">
            </div>
            <div class="mqj-xuegao3">
                <img src="../../assets/img/img-find/img-mother/mqj-img07.png" alt="">
            </div>
            <div class="mqj-title">
                <img class="mqj-title-bg ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="../../assets/img/img-find/img-mother/mqj-img01.png" alt="">
                <img class="mqj-title-img1 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="0.7s" src="../../assets/img/img-find/img-mother/mqj-img04.png" alt="">
                <img class="mqj-title-img2 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="0.9s" src="../../assets/img/img-find/img-mother/mqj-img03.png" alt="">
                <img class="mqj-title-img3 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.1s" src="../../assets/img/img-find/img-mother/mqj-img02.png" alt="">
            </div>
            <div class="mqj-words">
                <img class="mqj-wordsa mqj-wordsa01 ani"  swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.15s" swiper-animate-delay="1.3s" src="../../assets/img/img-find/img-mother/mqj-img08.png" alt="">
                <img class="mqj-wordsa mqj-wordsa02 ani"  swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.15s" swiper-animate-delay="1.45s" src="../../assets/img/img-find/img-mother/mqj-img09.png" alt="">
                <img class="mqj-wordsa mqj-wordsa03 ani"  swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.15s" swiper-animate-delay="1.6s" src="../../assets/img/img-find/img-mother/mqj-img10.png" alt="">
                <img class="mqj-wordsa mqj-wordsa04 ani"  swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.15s" swiper-animate-delay="1.75s" src="../../assets/img/img-find/img-mother/mqj-img11.png" alt="">
                <img class="mqj-wordsa mqj-wordsa05 ani"  swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.15s" swiper-animate-delay="1.9s" src="../../assets/img/img-find/img-mother/mqj-img12.png" alt="">
                <img class="mqj-wordsa mqj-wordsa06 ani"  swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.15s" swiper-animate-delay="2.05s" src="../../assets/img/img-find/img-mother/mqj-img13.png" alt="">
                <img class="mqj-wordsa mqj-wordsa07 ani"  swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.15s" swiper-animate-delay="2.2s" src="../../assets/img/img-find/img-mother/mqj-img14.png" alt="">
                <img class="mqj-wordsa mqj-wordsa08 ani"  swiper-animate-effect="rotateInUpLeft" swiper-animate-duration="0.15s" swiper-animate-delay="2.35s" src="../../assets/img/img-find/img-mother/mqj-img15.png" alt="">
                <img class="mqj-wordsa mqj-wordsa09 ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="1.15s" swiper-animate-delay="5.5s" src="../../assets/img/img-find/img-mother/mqj-img16.png" alt="">
            </div>
            <div class="mqj-words-l">
                <img class="ani"   swiper-animate-effect="zoomInLeft" swiper-animate-duration="1.35s" swiper-animate-delay="2.5s" src="../../assets/img/img-find/img-mother/mqj-img18.png" alt="">
            </div>
            <div class="mqj-words-r">
                <img class="ani"   swiper-animate-effect="zoomInRight" swiper-animate-duration="1.35s" swiper-animate-delay="3s" src="../../assets/img/img-find/img-mother/mqj-img19.png" alt="">
            </div>
            <div class="mqj-mum">
                <img class="ani"  swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="0.3s" src="../../assets/img/img-find/img-mother/mqj-img23.png" alt="">
            </div>
            <div class="cover"></div>
            <button class="btn-start" @click="mqjStart" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.35s" swiper-animate-delay="2.5s" >
                测测你的超能力指数 >
            </button>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="slide-container">
          <div class="slide-main">
            <div class="mqj-light mqj-light-p2">
                <img src="../../assets/img/img-find/img-mother/mqj-img21.png" alt="">
            </div>
            <div class="mqj-title mqj-title-p2">
                <img class="mqj-title-bg ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="../../assets/img/img-find/img-mother/mqj-p2img06.png" alt="">
                <!-- <p class="mqj-title-imgt ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="1.0s" swiper-animate-delay="0.3s">你是否GET？</p> -->
                <img class="mqj-title-img1 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.0s" src="../../assets/img/img-find/img-mother/mqj-p2img01.png" alt="">
                <img class="mqj-title-img2 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.2s" src="../../assets/img/img-find/img-mother/mqj-p2img02.png" alt="">
                <img class="mqj-title-img3 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.4s" src="../../assets/img/img-find/img-mother/mqj-p2img03.png" alt="">
                <img class="mqj-title-img4 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.6s" src="../../assets/img/img-find/img-mother/mqj-p2img04.png" alt="">
                <img class="mqj-title-img5 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.8s" src="../../assets/img/img-find/img-mother/mqj-p2img05.png" alt="">
            </div>
            <div class="mqj-cloud">
              <img class="mqj-cloud-p2" src="../../assets/img/img-find/img-mother/cloud-a.png" alt="">
            </div>
            <div class="mqj-mum-p2">
              <img class="ani"  swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="1.2s" src="../../assets/img/img-find/img-mother/mqj-p2img07.png" alt="">
            </div>
            <div class="mqj-child-p2">
              <img class="ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.8s" swiper-animate-delay="0.6s" src="../../assets/img/img-find/img-mother/mqj-p2img09.png" alt="">
            </div>
            <div class="mqj-words-p2">
              <img class="ani"  swiper-animate-effect="zoomInLeft" swiper-animate-duration="1.3s" swiper-animate-delay="2.0s" src="../../assets/img/img-find/img-mother/mqj-p2img08.png" alt="">
            </div>
            <div class="cover"></div>
            <div class="choose-btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="2.2s">
                <button id="choose-btn-p2-y" class="choose-btn-y">否</button>
                <button id="choose-btn-p2-n" class="choose-btn-n">是</button>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="slide-container">
          <div class="slide-main">
            <div class="mqj-light mqj-light-p3">
                <img src="../../assets/img/img-find/img-mother/mqj-img21.png" alt="">
            </div>
            <div class="mqj-title mqj-title-p3">
                <!-- <p class="mqj-title-imgt ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="1.0s" swiper-animate-delay="0.3s">你是否GET?</p> -->
                <img class="mqj-title-img1 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.3s" swiper-animate-delay="1.3s" src="../../assets/img/img-find/img-mother/mqj-p3img02.png" alt="">
            </div>
            <div class="top-circle top-circle-1"></div>
            <div class="top-circle top-circle-2"></div>
            <div class="top-circle top-circle-3"></div>
            <div class="mqj-words-p3">
                <img class="ani"  swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="2.0s" src="../../assets/img/img-find/img-mother/mqj-p3img03.png" alt="">
            </div>
            <div class="mqj-mum-p3">
                <img class="ani"  swiper-animate-effect="fadeInRight" swiper-animate-duration="0.3s" swiper-animate-delay="1.2s" src="../../assets/img/img-find/img-mother/mqj-p3img01.png" alt="">
            </div>
            <div class="mqj-cloud">
              <img class="mqj-cloud-p2" src="../../assets/img/img-find/img-mother/cloud-a.png" alt="">
            </div>
            <div class="mqj-shit-p3">
                <img class="ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.2s" swiper-animate-delay="2.4s" src="../../assets/img/img-find/img-mother/mqj-p3img04.png" alt="">
                <img class="ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.2s" swiper-animate-delay="2.7s" src="../../assets/img/img-find/img-mother/mqj-p3img05.png" alt="">
                <img class="ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.2s" swiper-animate-delay="3.0s" src="../../assets/img/img-find/img-mother/mqj-p3img06.png" alt="">
                <img class="ani"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.2s" swiper-animate-delay="3.3s" src="../../assets/img/img-find/img-mother/mqj-p3img07.png" alt="">
            </div>
            <div class="cover"></div>
            <div class="choose-btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="2.2s">
                <button id="choose-btn-p3-y" class="choose-btn-y">否</button>
                <button id="choose-btn-p3-n" class="choose-btn-n">是</button>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="slide-container">
          <div class="slide-main">
            <div class="mqj-light mqj-light-p4">
                <img src="../../assets/img/img-find/img-mother/mqj-img21.png" alt="">
            </div>
            <div class="mqj-title mqj-title-p4">
                <img class="mqj-title-bg ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="../../assets/img/img-find/img-mother/mqj-img01.png" alt="">
                <!-- <p class="mqj-title-imgt ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="1.0s" swiper-animate-delay="0.3s">你是否GET?</p> -->
                <img class="mqj-title-img1 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="0.7s" src="../../assets/img/img-find/img-mother/mqj-p4img02.png" alt="">
                <img class="mqj-title-img2 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="0.9s" src="../../assets/img/img-find/img-mother/mqj-p4img03.png" alt="">
                <img class="mqj-title-img3 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.1s" src="../../assets/img/img-find/img-mother/mqj-p4img04.png" alt="">
            </div>
            <div class="top-circle top-circle-1"></div>
            <div class="top-circle top-circle-2"></div>
            <div class="top-circle top-circle-3"></div>
            <div class="mqj-words-p4">
                <img class="mqj-wordsa mqj-wordsa01 ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.3s" src="../../assets/img/img-find/img-mother/mqj-p4img05.png" alt="">
                <img class="mqj-wordsa mqj-wordsa02 ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.5s" src="../../assets/img/img-find/img-mother/mqj-p4img06.png" alt="">
                <img class="mqj-wordsa mqj-wordsa03 ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.6s" swiper-animate-delay="1.7s" src="../../assets/img/img-find/img-mother/mqj-p4img07.png" alt="">
                <img class="mqj-wordsa mqj-wordsa04 ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.6s" swiper-animate-delay="2.3s" src="../../assets/img/img-find/img-mother/mqj-p4img08.png" alt="">
            </div>
            <div class="mqj-words-lp4">
                <img src="../../assets/img/img-find/img-mother/mqj-p4img09.png" alt="">
            </div>
            <div class="mqj-words-rp4">
                <img src="../../assets/img/img-find/img-mother/mqj-p4img10.png" alt="">
            </div>
            <div class="mqj-cloud">
              <img class="mqj-cloud-p2" src="../../assets/img/img-find/img-mother/cloud-a.png" alt="">
            </div>
            <div class="mqj-words-rap4">
                <img class="ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="2.6s"  src="../../assets/img/img-find/img-mother/mqj-p4img12.png" alt="">
            </div>
            <div class="mqj-mum-p4">
                <img class="ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.8s" swiper-animate-delay="2.0s" src="../../assets/img/img-find/img-mother/mqj-p4img01.png" alt="">
            </div>
            <div class="cover"></div>
            <div class="choose-btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="2.2s">
                <button id="choose-btn-p4-y" class="choose-btn-y">否</button>
                <button id="choose-btn-p4-n" class="choose-btn-n">是</button>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="slide-container">
          <div class="slide-main">
            <div class="mqj-light mqj-light-p5">
                <img src="../../assets/img/img-find/img-mother/mqj-img21.png" alt="">
            </div>
            <div class="mqj-title mqj-title-p5">
                <img class="mqj-title-bg ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="../../assets/img/img-find/img-mother/mqj-p5img01.png" alt="">
                <!-- <p class="mqj-title-imgt ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="1.0s" swiper-animate-delay="0.3s">你是否GET?</p> -->
                <img class="mqj-title-img1 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="0.7s" src="../../assets/img/img-find/img-mother/mqj-p5img02.png" alt="">
                <img class="mqj-title-img2 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="0.9s" src="../../assets/img/img-find/img-mother/mqj-p5img03.png" alt="">
                <img class="mqj-title-img3 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.1s" src="../../assets/img/img-find/img-mother/mqj-p5img04.png" alt="">
                <img class="mqj-title-img4 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.3s" src="../../assets/img/img-find/img-mother/mqj-p5img05.png" alt="">
            </div>
            <div class="top-circle top-circle-1"></div>
            <div class="top-circle top-circle-2"></div>
            <div class="top-circle top-circle-3"></div>
            <div class="mqj-words-rap5">
                <img class="ani"  swiper-animate-effect="zoomInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.5s"  src="../../assets/img/img-find/img-mother/mqj-p5img07.png" alt="">
            </div>
            <div class="mqj-mum-p5">
                <img class="ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.8s" swiper-animate-delay="1.2s" src="../../assets/img/img-find/img-mother/mqj-p5img06.png" alt="">
            </div>
            <div class="mqj-cloud">
              <img class="mqj-cloud-p2" src="../../assets/img/img-find/img-mother/cloud-a.png" alt="">
            </div>
            <div class="cover"></div>
            <div class="choose-btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="2.2s">
                <button id="choose-btn-p5-y" class="choose-btn-y">否</button>
                <button id="choose-btn-p5-n" class="choose-btn-n">是</button>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="slide-container">
          <div class="slide-main">
            <div class="mqj-light mqj-light-p6">
                <img src="../../assets/img/img-find/img-mother/mqj-img21.png" alt="">
            </div>
            <div class="mqj-title mqj-title-p5">
                <img class="mqj-title-bg ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.7s" src="../../assets/img/img-find/img-mother/mqj-p5img01.png" alt="">
                <!-- <p class="mqj-title-imgt ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="1.0s" swiper-animate-delay="0.3s">你是否GET?</p> -->
                <img class="mqj-title-img1 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="0.7s" src="../../assets/img/img-find/img-mother/mqj-p6img10.png" alt="">
                <img class="mqj-title-img2 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="0.9s" src="../../assets/img/img-find/img-mother/mqj-p6img11.png" alt="">
                <img class="mqj-title-img3 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.1s" src="../../assets/img/img-find/img-mother/mqj-p6img12.png" alt="">
                <img class="mqj-title-img4 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.3s" src="../../assets/img/img-find/img-mother/mqj-p6img13.png" alt="">
            </div>
            <div class="top-circle top-circle-1"></div>
            <div class="top-circle top-circle-2"></div>
            <div class="top-circle top-circle-3"></div>
            <div class="mqj-words-p6">
              <img class="ani mqj-words01"  swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.2s" swiper-animate-delay="1.7s"  src="../../assets/img/img-find/img-mother/mqj-p6img01.png" alt="">
              <img class="ani mqj-words02"  swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.2s" swiper-animate-delay="1.9s"  src="../../assets/img/img-find/img-mother/mqj-p6img02.png" alt="">
              <img class="ani mqj-words03"  swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.2s" swiper-animate-delay="2.1s"  src="../../assets/img/img-find/img-mother/mqj-p6img03.png" alt="">
              <img class="ani mqj-words04"  swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.2s" swiper-animate-delay="2.3s"  src="../../assets/img/img-find/img-mother/mqj-p6img04.png" alt="">
              <img class="ani mqj-words05"  swiper-animate-effect="zoomInRight" swiper-animate-duration="0.2s" swiper-animate-delay="2.5s"  src="../../assets/img/img-find/img-mother/mqj-p6img05.png" alt="">
              <img class="ani mqj-words06"  swiper-animate-effect="zoomInRight" swiper-animate-duration="0.2s" swiper-animate-delay="2.7s"  src="../../assets/img/img-find/img-mother/mqj-p6img06.png" alt="">
              <img class="ani mqj-words07"  swiper-animate-effect="zoomInRight" swiper-animate-duration="0.2s" swiper-animate-delay="2.9s"  src="../../assets/img/img-find/img-mother/mqj-p6img07.png" alt="">
              <img class="ani mqj-words08"  swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="3.2s"  src="../../assets/img/img-find/img-mother/mqj-p6img08.png" alt="">
            </div>
            <div class="mqj-cloud">
              <img class="mqj-cloud-p2" src="../../assets/img/img-find/img-mother/cloud-a.png" alt="">
            </div>
            <div class="mqj-mum-p6">
                <img class="ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.8s" swiper-animate-delay="1.2s" src="../../assets/img/img-find/img-mother/mqj-p6img14.png" alt="">
            </div>
            <div class="cover"></div>
            <div class="choose-btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="2.2s">
                <button id="choose-btn-p6-y" class="choose-btn-y">否</button>
                <button id="choose-btn-p6-n" class="choose-btn-n">是</button>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="slide-container">
          <div class="slide-main">
            <div class="mqj-light mqj-light-p7">
                <img src="../../assets/img/img-find/img-mother/mqj-img21.png" alt="">
            </div>
            <div class="mqj-title mqj-title-p7">
                <img class="mqj-title-bg ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.5s" src="../../assets/img/img-find/img-mother/mqj-img01.png" alt="">
                <!-- <p class="mqj-title-imgt ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="1.0s" swiper-animate-delay="0.3s">你是否GET?</p> -->
                <img class="mqj-title-img1 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="0.7s" src="../../assets/img/img-find/img-mother/mqj-p7img02.png" alt="">
                <img class="mqj-title-img2 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="0.9s" src="../../assets/img/img-find/img-mother/mqj-p7img03.png" alt="">
                <img class="mqj-title-img3 ani"  swiper-animate-effect="rollIn" swiper-animate-duration="0.2s" swiper-animate-delay="1.1s" src="../../assets/img/img-find/img-mother/mqj-p7img04.png" alt="">
            </div>
            <div class="top-circle top-circle-1"></div>
            <div class="top-circle top-circle-2"></div>
            <div class="top-circle top-circle-3"></div>
            <div class="mqj-cloud">
              <img class="mqj-cloud-p2" src="../../assets/img/img-find/img-mother/cloud-a.png" alt="">
            </div>
            <div class="mqj-words-p7">
                <img class="ani mqj-words01"  swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s" swiper-animate-delay="1.7s"  src="../../assets/img/img-find/img-mother/mqj-p7img06.png" alt="">
                <img class="ani mqj-words02"  swiper-animate-effect="zoomInLeft" swiper-animate-duration="0.5s" swiper-animate-delay="2.0s"  src="../../assets/img/img-find/img-mother/mqj-p7img07.png" alt="">
            </div>
            <div class="mqj-mum-p7">
                <img class="ani"  swiper-animate-effect="bounceIn" swiper-animate-duration="0.8s" swiper-animate-delay="1.2s" src="../../assets/img/img-find/img-mother/mqj-p7img05.png" alt="">
            </div>
            <div class="cover"></div>
            <div class="choose-btn ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.8s" swiper-animate-delay="2.2s">
                <button id="choose-btn-p7-y" class="choose-btn-y choose-btn-link">否</button>
                <button id="choose-btn-p7-n" class="choose-btn-n choose-btn-link">是</button>
            </div>
          </div>
        </div>
      </swiper-slide>
      <!-- Add Pagination -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
// @ is an alias to /src
import '../../assets/css/muqinjie.scss'
import '../../assets/css/animate-mqj.css'
import * as swiperAni from '@/assets/js/common/swiper.animate.min'
export default {
  name: 'FindDetail',
  data() {
    return {
      img: 'banner-a01.png',
      lists: [],
      swiperOption: {
        direction: 'vertical',
        fadeEffect: {
          crossFade: true
        },
        on: {
          init: function() {
            swiperAni.swiperAnimateCache(this)
            swiperAni.swiperAnimate(this)
          },
          slideChange: function() {
            swiperAni.swiperAnimate(this)
          }
        }
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mqjSwiper.swiper
    }
  },
  components: {},
  methods: {
    mqjStart() {
      this.swiper.slideTo(1, 500, true)
    }
  },
  mounted() {
    let star = 0
    $('.choose-btn-n').click(() => {
      this.swiper.slideNext()
      star++
    })
    $('.choose-btn-y').click(() => {
      this.swiper.slideNext()
    })
    $('.choose-btn-link').click(() => {
      console.log(star)
      switch (star) {
        case 0:
          this.$router.push('/find/findMother/findMotherResultD')
          break
        case 1:
          this.$router.push('/find/findMother/findMotherResultC')
          break
        case 2:
          this.$router.push('/find/findMother/findMotherResultC')
          break
        case 3:
          this.$router.push('/find/findMother/findMotherResultB')
          break
        case 4:
          this.$router.push('/find/findMother/findMotherResultB')
          break
        case 5:
          this.$router.push('/find/findMother/findMotherResultA')
          break
        case 6:
          this.$router.push('/find/findMother/findMotherResultA')
          break
        default:
          this.$router.push('/find/findMother/findMotherResultA')
      }
    })
  }
}
</script>
<style scoped lang="scss">
.main-container {
  width: 100%;
  height: calc(100vh - 45px);
  overflow: hidden;
  text-align: left;
}
</style>
